<template>
  <div>
  <div style="margin-left: 30px;background-color: #FCF0C6;width: 1200px;height: 100px;margin-top: 60px">
    <br>
    <p align="center" style="margin-top: 10px"><b>维数金融将根据您填写的信息进行初步审核，您填写的信息资料越真实详尽，您申请融资的审批通过率越高。同时，我们有严格的用户信息操作规范.</b></p>
    <p style="margin-left: 73px"><font color="#dc143c"><b>确保您的隐私不被泄露，请勿填写虚假信息。</b></font></p>
  </div>

  <div>

    <el-button type="text" @click="dialogVisible = true">收房合同查询</el-button>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
    <span>
      <el-table
        :data="tableData"
        style="width: 100%">
                 <el-table-column label="业主名称" align="center" prop="ownerName"/>
                 <el-table-column label="房产信息" align="center" prop="houseName"/>
                 <el-table-column label="签约日期" align="center" prop="createTime"/>
                 <el-table-column label="操作">
                 <template slot-scope="scope">
                   <el-tag type="danger" @click="selectedid(scope.row)">选中</el-tag>
                 </template>
               </el-table-column>
             </el-table>

    </span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>



    <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="收房合同编号" prop="sfContractNo">
              <el-input v-model="form.sfContractNo" placeholder="请输入收房合同编号"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="房产信息" prop="houseName">
              <el-input v-model="form.houseName" placeholder="请输入房产信息"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="业主姓名" prop="ownerName">
              <el-input v-model="form.ownerName" placeholder="业主姓名"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div>
            <el-form-item label="业主手机号" prop="ownerMobile">
              <el-input v-model="form.ownerMobile" placeholder="请输入业主手机号"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="业主身份证号" prop="ownerIdCard">
              <el-input v-model="form.ownerIdCard" placeholder="请输业主身份证号"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div>
            <el-form-item label="银行卡号" prop="bankCard">
              <el-input v-model="form.bankCard" placeholder="请输入银行卡号"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="银行名称" prop="bankName">
              <el-input v-model="form.bankName" placeholder="请输入银行名称"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div>
            <el-form-item label="开户行" prop="bankOpen">
              <el-input v-model="form.bankOpen" placeholder="请输入开户行"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <hr>
      <el-row>
      <el-col :span="8">
        <el-form-item label-width="150px" label="金融产品选择" prop="cpid">
          <el-select @change="changeprodect" v-model="form.cpid" placeholder="请选择">
            <el-option v-for="item in option1" :label="item.jrProductName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item label-width="79px" label="年利率" prop="nll">
          <el-input v-model="form.nll" clearable :style="{width: '100%'}">%
          </el-input>
        </el-form-item>
      </el-col>
      </el-row>
      <el-col :span="8">
        <el-form-item label-width="150px" label="借款期限" prop="jkqx">
          <el-input v-model="form.jkqx" placeholder="/月" clearable readonly
                    :style="{width: '100%'}"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label-width="150px" label="年一次性服务费率" prop="fwf">
          <el-input v-model="form.fwf" placeholder="年一次性服务费率"  clearable
                    :style="{width: '100%'}">%</el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-row>
          <el-col :span="8">
            <el-form-item label-width="150px" label="借款金额" prop="jqje">
              <el-input v-model="form.jqje" placeholder="借款金额"  clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label-width="150px" label="授信额度" prop="sxed">
              <el-input v-model="form.sxed" placeholder="授信额度" readonly
                        :style="{width: '100%'}">%</el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>
      <el-row>
        <el-col :span="14">
          <el-form-item label="备注" prop="bz">
            <el-input v-model="form.bz" type="textarea" placeholder="请输入备注"
                      :autosize="{minRows: 4, maxRows: 4}" :style="{width: '40%'}"></el-input>
          </el-form-item>
        </el-col>
        <div><el-button type="warning"   @click="" >分期计算详情</el-button></div>
      </el-row>

    </el-form>
    <div><el-button type="primary" @click="add()">提 交</el-button></div>
  </div>
  </div>


</template>

<script>
  import {sfList,listinstall,changelistprodect} from "../../../api/financial/product";
  export default {
    name: "addsf",
    components: {
    },
    data(){
      return{
        option1: [],
        tableData:[],
        dialogVisible: false,
        form:{
          sxed:'',
          gscd: '',
          zkcd: '',
          nll: '',
          jqje: '',
          cpid: undefined,
        },
        rules: {

          sfContractNo: [
            {required: true, message: '请输入业主姓名', trigger: 'blur'},
          ],
          houseName: [
            {required: true, message: '请输入签约人(甲方)', trigger: 'blur'},
          ],
          ownerName: [
            {required: true, message: '请输入业主联系地址', trigger: 'blur'},
          ],

          ownerMobile: [
            {required: true, message: '请输入业主手机号码', trigger: 'blur'},
            {min: 11, max: 11, message: '手机号长度11位', trigger: 'blur'}
          ],
          ownerIdCard: [
            {required: true, message: '请输入业主证件号码', trigger: 'blur'},
            {min: 18, max: 18, message: '证件号码18位', trigger: 'blur'}
          ],
          bankCard: [
            {required: true, message: '请输入签约人证件号码', trigger: 'blur'},
            {min: 18, max: 18, message: '证件号码18位', trigger: 'blur'}
          ],
          bankName: [
            {required: true, message: '请输入紧急手机号码', trigger: 'blur'},
          ],
          bankOpen: [
            {required: true, message: '请输入业主姓名', trigger: 'blur'},
          ],
          nll: [{
            required: true,
            message: '不能为空，请输入年利率',
            trigger: 'blur'
          }],
          jqje: [{
            required: true,
            message: '不能为空，借款金额',
            trigger: 'blur'
          }],
          fwf: [{
            required: true,
            message: '不能为空，年一次性服务费率',
            trigger: 'blur'
          }],
          jkqx: [{
            required: true,
            message: '不能为空，借款期限',
            trigger: 'blur'
          }],
          sxed: [{
            required: true,
            message: '不能为空，授信额度',
            trigger: 'blur'
          }],
          bz: [{
            required: true,
            message: '不能为空，请输入备注',
            trigger: 'blur'
          }],
        },

      }
    },
    methods:{
      getOption(){
        listinstall().then(rex=>{
          this.option1=rex.rows;
          console.log("金融产品列表",rex.rows)
        })
      },
      //如果下拉框发生改变就查询数据
      changeprodect(){
        changelistprodect(this.form.cpid).then(res=>{
          console.log(res);
          this.form.sxed=res.creditLine;
          // this.form.jqje=res.creditLine;
          this.form.jkqx=res.instalmentPeriod;
          this.form.start_date=res.createTime;
          this.form.end_date=res.updateTime;
        })
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
      },

      selectedid(row) {
        this.form.sfContractNo = row.sfContractNo
        this.form.houseName = row.houseName
        this.form.ownerName = row.ownerName
        this.form.ownerMobile = row.ownerMobile
        this.form.ownerIdCard = row.ownerIdCard
        this.form.bankCard = row.bankCard
        this.form.bankName = row.bankName
        this.form.bankOpen = row.bankOpen
        this.dialogVisible = false;
      },

      sfList(){
        sfList(this.queryParams).then(response=>{
          this.tableData=response.data;
        })
      },
      add(){
        // addInfo(this.form).then(response => {
          this.msgSuccess("新增成功");
          // this.$router.push("/house/list")
        // });
      }

    },
    created() {
      this.sfList();
      this.getOption();

    },



  }
</script>

